<template>
  <div class="app-container">
    <div class="user">
      <p class="title">个人信息编辑</p>
      <div class="line" />
      <el-form ref="form" :model="formModel" class="form-container" label-width="150px" :rules="rules">
        <el-row>
          <el-col :span="24">
            <el-form-item label="姓名：" prop="name">
              <el-input v-model="formModel.name" class="filter-item" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="手机：" prop="mobile">
              <el-input v-model="formModel.mobile" class="filter-item" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="类型：" prop="type">
              <hey-select v-model="formModel.type" clcd="userType" @change="genRoleOptions" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="角色：" prop="roleId">
              <el-select
                v-model="formModel.roleId"
                placeholder="请选择"
                :disabled="!formModel.type"
              >
                <el-option
                  v-for="(label, value) of roleOptions"
                  :key="value"
                  :label="label"
                  :value="value * 1"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注：" prop="remarks ">
              <el-input
                v-model="formModel.remarks"
                :autosize="{ minRows: 2, maxRows: 4}"
                type="textarea"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="text-center">
          <el-button type="primary" @click="handleSubmit()">确定</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'

export default {
  name: 'Password',
  data() {
    return {
      roleOptions: {},
      formModel: {
        name: '',
        type: '',
        mobile: '',
        roleId: '',
        remarks: ''
      },
      rules: {
      }
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ]),
    ...mapState('login', [
      'userInfo'
    ])
  },
  created() {
  },
  mounted() {
    this.$form = this.$refs.form
    this.getUser()
    this.genRoleOptions(false)
    this.initRules()
  },
  methods: {
    initRules() {
      const NULL_TIP = this.CONST.NULL_TIP
      this.rules = {
        type: [{ required: true, message: NULL_TIP, trigger: ['change', 'blur'] }],
        name: [{ required: true, message: NULL_TIP, trigger: ['change', 'blur'] }]
      }
      this.$nextTick(_ => {
        this.$form.clearValidate()
      })
    },
    getUser() {
      this.assignData(this.userInfo, this.formModel)
    },
    genRoleOptions(flag) {
      if (flag !== false) {
        this.formModel.roleId = ''
      }
      const param = {
        type: this.formModel.type
      }
      this.get('/user/listAuthRoleByType', param).then(ret => {
        this.roleOptions = ret
      }).catch(_ => {
        this.roleOptions = {}
      })
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const { pageType, formModel } = this
          const param = { ...formModel }
          const url = pageType === 'add' ? '/authority/addAuthRole' : '/authority/updateAuthRole'
          const tip = pageType === 'add' ? '新增成功！' : '修改成功！'
          this.post(url, param).then(res => {
            this.$info(tip, () => {
              this.$emit('mntSuc', res)
              this.closeDialog()
            })
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .user {
    width: 1000px;
    margin: 0 auto;

    .line {
      height: 2px;
      background: #DCDFE6;
      margin-bottom: 30px;
    }

    .form-container {
      border: none;
    }

    .title {
      font-size: 18px;
      text-align: center;
      margin-bottom:  30px;
    }
  }
</style>
